<template>
  <view class="work-container">
    <nav-bar :title="'新闻资讯'"></nav-bar>
    <view :style="marginTop">
      <u-swiper
          :list="swiperList"
          radius="0"
          :autoplay="true"
          :interval="5000"
          :easingFunction="'linear'"
          :indicator="true"
          :imgMode="'heightFix'"
          height="10rem"
          v-if="!swiperShow"
          @click="swiperClick"
      ></u-swiper>
      <u-tabs
          :list="listTitle"
          lineWidth="30"
          lineColor="#f56c6c"
          :activeStyle="{
          color: '#303133',
          fontWeight: 'bold',
          transform: 'scale(1.05)',
        }"
          :inactiveStyle="{
          color: '#606266',
          transform: 'scale(1)',
        }"
          itemStyle="padding-left: 15px; padding-right: 15px; height: 50px;width:33.3%"
          @change="clickTabs"
      >
      </u-tabs>
      <view class="news-container">
        <view class="kong-container" v-if="newsList.length==0">
          <image :src="kongBg"></image>
          <text>没有更多数据啦！</text>
        </view>
        <view
            class="news-list"
            v-for="(item, index) in newsList"
            @click="toDetail(index)"
            v-else
        >
          <image
              :src="item.pic"
              mode="widthFix"
              style="width: 100px; height: 100px"
          ></image>
          <view class="right">
            <text class="title">{{ item.title }}</text>
            <view class="time">
              <image
                  src="../../static/images/news/time.png"
                  class="logo"
              ></image>
              <text>{{ item.createTime }}</text>
            </view>
            <view class="time">
              <image
                  src="../../static/images/news/eyes.png"
                  class="logo"
              ></image>
              <text>{{ item.num }}</text>
              <image
                  src="../../static/images/news/case.png"
                  class="logo"
                  style="margin-left: 40rpx"
              ></image>
              <text>{{ classifyName }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import navBar from "../../components/nav-bar.vue";
import bannerConst from "@/static/const/bannerConst";
import bgBase64 from "@/static/const/bgBase64";
import {isEmptyArray, isEmptyString, toast} from "@/utils/common";

export default {
  components: {navBar},
  data() {
    return {
      marginTop: "",
      swiperList: [],
      swiperShow: false,
      listTitle: [],
      newsList: [],
      classifyName: "",
      classifyNameId: "",
      kongBg: bgBase64.noMoreDataBg,
    };
  },
  onLoad: function () {
    const top = uni.getSystemInfoSync().statusBarHeight + 44;
    this.marginTop = "padding-top:" + top + "px";
    this.getSwiperList();
    this.getNewsListTitle();
  },
  onShow: function () {
    uni.$on("classifyNameId", (res) => {
     this.getNewsList(res)
    });
  },
  methods: {
    //获取轮播图列表
    getSwiperList() {
      this.$store
          .dispatch("GetBannerListByType", bannerConst.bannerNews)
          .then((res) => {
            this.swiperList = res.data;
            if (isEmptyArray(this.swiperList)) {
              this.swiperShow = true;
              return;
            }
            this.swiperList.forEach((item) => {
              item.url = item.pic;
            });
          });
    },
    //获取新闻列表分类
    getNewsListTitle() {
      this.$store
          .dispatch("GetNewsTypeListTitle", bannerConst.bannerNews)
          .then((res) => {
            this.listTitle = res.data.records;
            if (this.listTitle.length > 0) {
              this.listTitle.forEach((item) => {
                item.name = item.name;
              });
              this.getNewsList(this.listTitle[0].id);
              this.classifyName = this.listTitle[0].name;
            }
          });
    },
    //获取新闻列表
    getNewsList(id) {
      this.classifyNameId = id;
      this.$store.dispatch("GetNewsList", id).then((res) => {
        this.newsList = res.data;
        if (this.newsList.length > 0) {
          this.newsList.forEach((item) => {
            //取时间只取年月日
            item.createTime = item.createTime.substring(0, 10);
          });
        }
      });
    },
    //点击标签
    clickTabs(index) {
      this.classifyName = index.name;
      this.getNewsList(index.id);
    },
    //去新闻详情
    toDetail(index) {
      uni.navigateTo({
        url: "/pages/news/detail?id=" + this.newsList[index].id+"&classifyNameId="+this.classifyNameId,
      });
    },
    swiperClick(e) {
      const item = this.swiperList[e];
      const linkType = item.linkType;
      switch (linkType) {
        case "1":
          //新闻
          if (isEmptyString(item.linkId)) {
            uni.switchTab({
              url: "/pages/news/index",
            });
          } else {
            uni.navigateTo({
              url: "/pages/news/detail?id=" + item.linkId,
            });
          }
          break;
        case "2":
          //法律咨询
          if (isEmptyString(item.linkId)) {
            uni.navigateTo({
              url: "/pages/lawadvice-list/index",
            });
          } else {
            uni.navigateTo({
              url: "/pages/telephone-consultation/index?id=" + item.linkId,
            });
          }
          break;
        case "3":
          //法律服务
          if (isEmptyString(item.linkId)) {
            console.log("法律服务");
            uni.navigateTo({
              url: "/pages/law-service/index",
            });
          } else {
            uni.navigateTo({
              url: "/pages/law-service-detail/index?id=" + item.linkId,
            });
          }
          break;
        case "4":
          //律师详情
          if (isEmptyString(item.linkId)) {
            uni.navigateTo({
              url: "/pages/law-list-more/index",
            });
          } else {
            uni.navigateTo({
              url: "/pages/law-detail/index?id=" + item.linkId,
            });
          }
          break;
        default:
          toast("暂未开放");
          break;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.work-container {
  width: 100%;
  min-height: 100vh;
  background-color: #f5f7fa;

  .news-container {
    padding-left: 20rpx;
    padding-right: 20rpx;

    .kong-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding-top: 20rpx;
      padding-bottom: 6rem;

      text {
        color: gray;
      }
    }

    .news-list {
      width: 100%;
      padding: 20rpx;
      background-color: #fff;
      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2),
      0 6px 20px 0 rgba(0, 0, 0, 0.19);
      border-radius: 10px;
      display: flex;
      align-items: center;
      margin-top: 20rpx;
      margin-bottom: 40rpx;
      box-sizing: border-box;

      image {
        // width: 80%;
      }

      .right {
        display: flex;
        flex-direction: column;
        margin-left: 20rpx;

        .time {
          color: grey;
          margin-top: 20rpx;
          display: flex;
          align-items: center;

          .logo {
            width: 30rpx;
            height: 30rpx;
          }

          text {
            text-align: center;
            margin-left: 20rpx;
          }
        }
      }
    }
  }
}
</style>
  